<!-- 图片列表 -->
<template>
  <div class="image">
    <!-- 搜索框 -->

    <!-- 树状控件 -->
    <div class="tree">
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </div>
    <!-- 图片列表 -->
    <div class="list_f">
      <div class="button">
        <span @click="tomy">我的相册</span>
        <span @click="torelease">发布相册</span>
      </div>
      <div class="list">
        <div class="img_list" v-for="(item, index) in imglist" :key="index">
          <!-- 发布者信息 -->

          <div class="info">
            <!-- 头像 -->
            <div class="headpic">
              <img :src="item.haad_pic" alt="" />
            </div>
            <div class="name">
              <span>{{ item.name }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <!-- 图片 -->
          <div class="imgs">
            <span v-for="(items, indexs) in item.image_list" :key="indexs">
              <img :src="items" alt=""
            /></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { image_list } from "../../../utils/api";
import { useRouter } from "vue-router";
var router = useRouter();

interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};

const data: Tree[] = [
  {
    label: "全部",
    children: [
      {
        label: "小学",
        children: [
          {
            label: "试验小学",
            children: [
              {
                label: "一年级",
              },
              {
                label: "二年级",
              },
              {
                label: "三年级",
              },
            ],
          },
        ],
      },
    ],
  },
];

const defaultProps = {
  children: "children",
  label: "label",
};

// 跳路由
const tomy = () => {
  // console.log("go back");
  router.push("/myimglist");
};
var torelease = () => {
  router.push("/releaseimg");
};

// 图片列表
var imglist = ref([
  {
    name: "",
    time: "",
    haad_pic: "",
    image_list: "",
  },
]);
onMounted(() => {
  // 获取图片列表
  image_list().then((res) => {
    imglist.value = res.data.userinfo;

    console.log(imglist.value);
  });
});
</script>




<style   scoped>
* {
  margin: 0;
  padding: 0;
}
.image {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tree {
  width: 200px;
  height: 620px;
  padding-right: 20px;
  border: 1px solid #999;
}
.list_f {
  border: 1px solid #999;
}
.list {
  height: 570px;
  overflow-x: hidden;
  overflow-y: visible;
}
.img_list {
  width: 900px;
  margin: 0 10px;
  padding: 10px 50px;
}
.info {
  display: flex;
  align-items: center;
}
.info .headpic {
  height: 40px;
  width: 40px;
  background-color: pink;
  border-radius: 50%;
  margin: 5px;
}
.info .headpic img {
  height: 100%;
  border-radius: 50%;
}
.info .name {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.info .name span {
  margin: 2px;
}
.img_list .imgs {
  background-color: #eee;
  display: flex;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.img_list .imgs span {
  width: 30%;
  height: 150px;
  background-color: pink;
  margin: 5px;
  text-align: center;
  line-height: 150px;
  border-radius: 3px;
}
.img_list .imgs span img {
  width: 100%;
  height: 100%;
}

.button {
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.button span {
  font-size: 12px;
  color: #fff;
  padding: 3px 10px;
  margin: 0 5px;
  border-radius: 4px;
  border: 1px solid #1890ff;
  background-color: #1890ff;
}
.button span:hover {
  background-color: #fff;
  border: 1px solid #1890ff;
  color: #000;
  cursor: pointer;
}
</style>




